<template>
  <fieldset>
    <legend>商品</legend>
    <h1>商品:Product</h1>
    <ul>
        <li v-for="item in productData" :key="item.id">
            <b>
                产品名称：{{item.title}}
            </b>
            ------
            <b>
                价格：{{item.price}}
            </b>
            ------
            <b>
                库存：{{item.inventory}}
            </b>
            <button :disabled="item.inventory===0" @click="addCart(item)">+加入购物车</button>
        </li>
    </ul>
  </fieldset>
</template>
<script>
//需求

//1.请求服务器，在product组件里面渲染

// - 封装请求的方法

// - 请求放到vuex的action里面

// - vuex需要模块化，并且添加mutation

//2.点击产品后面的按钮，需要将产品添加到购物车

//3.相同的数据添加到购物车之后，需要让购物车的数量加1，产品的库存-1

//4.总价计算
import { mapActions, mapState } from "vuex";
export default {
  methods: {
    addCart(current) {
      //current 点击按钮选中的数据
      console.log(current);
      this.ADD_CART(current);
    },
    ...mapActions("product", ["FETCH_PRODUCT"]),
    ...mapActions("cart", ["ADD_CART"]),
  },
  computed: {
    ...mapState("product", ["productData"]),
  },
  mounted() {
    this.FETCH_PRODUCT();
  },
};
</script>